<template>
    <a-modal
        :title="title"
        :width="900"
        :visible="visible"
        :confirmLoading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        :okButtonProps="{props:{disabled:disabled}}"
        cancelText="关闭">

        <a-spin :spinning="confirmLoading">
            <a-form-model ref="form" :model="model" :rules="validatorRules">
                <a-row style="width: 100%">
                    <a-col :span="24/2">
                        <a-form-model-item
                            :labelCol="labelCol"
                            :wrapperCol="wrapperCol"
                            prop="title"
                            label="标题">
                             <a-input placeholder="请输入标题" v-model="model.title" :readOnly="disableSubmit"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24/2">
                        <a-form-model-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        prop="msgCategory"
                        label="消息类型">
                        <a-select
                            v-model="model.msgCategory"
                            placeholder="请选择消息类型"
                            :disabled="disableSubmit"
                            :getPopupContainer = "(target) => target.parentNode">
                            <a-select-option value="1">通知公告</a-select-option>
                            <a-select-option value="2">系统消息</a-select-option>
                        </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                 <a-row style="width: 100%">
                     <a-col :span="24/2">
                        <a-form-model-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        prop="startTime"
                        label="开始时间:">
                        <j-date style="width: 100%" :getCalendarContainer="node => node.parentNode" v-model="model.startTime"  placeholder="请选择开始时间" showTime dateFormat="YYYY-MM-DD HH:mm:ss" ></j-date>
                        </a-form-model-item>
                     </a-col>
                      <a-col :span="24/2">
                        <a-form-model-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        prop="endTime"
                        label="结束时间"
                        class="endTime">
                        <j-date style="width: 100%" :getCalendarContainer="node => node.parentNode" v-model="model.endTime" placeholder="请选择结束时间" showTime dateFormat="YYYY-MM-DD HH:mm:ss"></j-date>
                        </a-form-model-item>
                      </a-col>
                 </a-row>
                   <a-row style="width: 100%;">
                        <a-col :span="24/2">
                            <a-form-model-item
                            :labelCol="labelCol"
                            :wrapperCol="wrapperCol"
                            label="优先级">
                            <a-select
                                v-model="model.priority"
                                placeholder="请选择优先级"
                                :disabled="disableSubmit"
                                :getPopupContainer = "(target) => target.parentNode">
                                <a-select-option value="L">低</a-select-option>
                                <a-select-option value="M">中</a-select-option>
                                <a-select-option value="H">高</a-select-option>
                            </a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="24/2">
                            <a-form-model-item
                            :labelCol="labelCol"
                            :wrapperCol="wrapperCol"
                            prop="msgType"
                            label="通告类型">
                            <a-select
                                v-model="model.msgType"
                                placeholder="请选择通告类型"
                                :disabled="disableSubmit"
                                @change="chooseMsgType"
                                :getPopupContainer = "(target) => target.parentNode">
                                <a-select-option value="USER">指定用户</a-select-option>
                                <a-select-option value="ALL">全体用户</a-select-option>
                            </a-select>
                            </a-form-model-item>
                        </a-col>
                   </a-row>
                  
                   <a-row style="width: 100%;">
                        <a-col :span="24/2">
                            <a-form-model-item
                            :labelCol="labelCol"
                            :wrapperCol="wrapperCol"
                            prop="msgAbstract"
                            label="摘要">
                            <a-textarea placeholder="请输入摘要"  v-model="model.msgAbstract" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="24/2">
                            <a-form-model-item
                            :labelCol="labelCol"
                            :wrapperCol="wrapperCol"
                            label="指定用户"
                            v-if="userType">
                            <a-select
                                mode="multiple"
                                placeholder="请选择用户"
                                :labelInValue=true
                                v-model="selectedUser"
                                @dropdownVisibleChange="selectUserIds"
                                @change="handleChange"
                            >
                            </a-select>
                            </a-form-model-item>
                        </a-col>
                   </a-row>

                   <a-row style="width: 100%;">
                        <a-col :span="24">
                            <a-form-model-item
                            :labelCol="labelColX1"
                            :wrapperCol="wrapperColX1"
                            label="内容"
                            class="j-field-content">
                            <!-- <j-editor v-model="model.msgContent"></j-editor> -->
                            </a-form-model-item>
                        </a-col>
                    </a-row>
            </a-form-model>
        </a-spin>    
    </a-modal>
</template>
<script>
import JDate from '@/common/components/domain/JDate'
export default {
    name: 'AnnouncementForm',
    components: {JDate},
    data() {
        return {
            title: '操作',
            visible: false,
            confirmLoading: false,
            disabled: false,
            disableSubmit:false,
             userType:false,
             model: {},
             labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
             },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 18 },
            },
             labelColX1: {
                xs: { span: 24 },
                sm: { span: 3 },
            },
            wrapperColX1: {
                xs: { span: 24 },
                sm: { span: 21 },
            },
             validatorRules:{
                titile: [{ required: true, message: '请输入标题!' }],
                msgCategory: [{ required: true, message: '请选择消息类型!' }],
                msgType:[{ required: true, message: '请选择通告对象类型!' }],
                endTime:[{ required: true, message: '请选择结束时间!'} ,{validator: this.endTimeValidate}],
                startTime:[{required: true, message: '请选择开始时间!'},{validator: this.startTimeValidate}],
                msgAbstract: [{ required: true, message: '请输入摘要!' }],
             },
        }
    },
    methods: {
        add() {
            this.edit({});
        },
        edit() {
             this.model = {}
            this.disable = false;
            this.visible = true;
        },
        handleCancel() {
            this.visible = false;
        },
        handleOk() {
            this.visible = false;
        },
        chooseMsgType() {},
    }
}
</script>